<template>
  <div style="height: 100%">
    <el-container style="height: 100vh; border: 1px solid #eee">
      <el-aside width="200px">
        <el-menu router :default-active="$route.path">
          <template v-for="item in menuConfig">
            <el-submenu :index="item.id" :key="item.id" v-if="item.children">
              <template slot="title" v-if="item.children.filter((o) => o.roles.indexOf(username) !== -1).length"
                ><i class="el-icon-message"></i>{{ item.name }}</template
              >
              <template v-for="children in item.children">
                <el-menu-item
                  :index="'/' + children.path"
                  v-if="children.roles.indexOf(username) !== -1 && !children.menuProps.hidden"
                  :key="children.path"
                  >{{ children.name }}</el-menu-item
                >
              </template>
            </el-submenu>

            <el-menu-item :index="'/' + item.path" :key="item.path" v-else-if="item.roles.indexOf(username) !== -1">
              {{ item.name }}
            </el-menu-item>
          </template>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 12px" class="header-con">
          <el-breadcrumb separator="/" class="breadcrumb-cn">
            <template v-for="item in breadcrumb_list">
              <el-breadcrumb-item :key="item.id || item.path">{{ item.name }}</el-breadcrumb-item>
              <template v-if="item.children && !$_.isEmpty(item.children)">
                <el-breadcrumb-item v-for="val in item.children" :key="val.id || val.path">{{ val.name }}</el-breadcrumb-item>
              </template>
            </template>
          </el-breadcrumb>

          <el-dropdown @command="commandEvent">
            <div>
              <i class="el-icon-setting" style="margin-right: 15px"></i>
              <span>{{ username }}</span>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="outLogin">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>

        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { menuConfig } from '@/router/menuConfig';
import { mapState } from 'vuex';
import { setCookie, getCookie } from '@/utils/cookie';

export default {
  data() {
    const item = {
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄',
    };
    return {
      tableData: Array(20).fill(item),
      menuConfig,
      username: getCookie().username,
    };
  },
  computed: {
    ...mapState(['breadcrumb_list']),
  },
  methods: {
    commandEvent(command) {
      switch (command) {
        case 'outLogin':
          setCookie('username', '', 1);
          // 刷新当前页面
          location.reload();
          break;
      }
    },
  },
};
</script>

<style>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
  display: flex;
  justify-content: space-between;
}

.el-aside {
  color: #333;
}
.el-menu {
  color: #fff;
  /* background-color: rgb(20, 20, 66); */
}
.el-breadcrumb.breadcrumb-cn {
  line-height: 60px;
}
</style>
